<template>
	<el-popover placement="bottom" :width="300" trigger="click">
		<template #default>
			<slot></slot>
		</template>

		<template #reference>
			<el-badge style="cursor: pointer;" :value="value" :max="max" :is-dot="isDot">
				<component :is="`el-icon-${toLine(icon)}`"></component>
			</el-badge>
		</template>
	</el-popover>
</template>

<script lang="ts" setup name="notification">
	import {
		toLine
	} from '@/utils/main.ts'

	let props = defineProps({
		icon: {
			type: String,
			default: 'Bell'
		},

		value: {
			type: [String, Number],
			default: ''
		},

		max: {
			type: Number
		},

		isDot: {
			type: Boolean,
			default: false
		},

	})
</script>

<style scoped>

</style>
